<template>
  <div class="module-main">
    <je-panel v-bind="lauoutOptions">
      <template #left>
        <source-type @changeSelectProduct="changeSelectProduct" />
      </template>
      <template #default>
        <je-tabs
          v-model:activeKey="activeKey"
          hide-add
          type="editable-card"
          class="layout-tabs"
          :tab-bar-gutter="tabBarGutter"
          @edit="onEdit"
          @change="onChange"
        >
          <je-tab-pane
            v-for="pane in sourcePanes"
            :key="pane.key"
            :closable="pane.closable"
            style="height: 100%"
          >
            <template #tab>
              <span>
                <i :class="pane.iconClass"></i>
                {{ pane.title }}
              </span>
            </template>
            <div v-if="pane.key == 'index'" class="table-home">
              <source-home />
            </div>
            <div v-else style="height: 100%">
              <source-layout :tab-data="curTabData" />
            </div>
          </je-tab-pane>
        </je-tabs>
      </template>
    </je-panel>
  </div>
</template>

<script>
  import { defineComponent, reactive, toRefs, onBeforeMount, onMounted, onUnmounted } from 'vue';
  import SourceType from '@/views/data-source/source-type/index.vue';
  import SourceHome from '@/views/data-source/source-view/components/source-home.vue';
  import SourceLayout from '@/views/data-source/source-layout.vue';
  import VueEvent from '@/helper/event';
  import { Panel, Tabs } from '@jecloud/ui';
  import {
    SOURCE_TREE_SELECT,
    SOURCE_SELECT_TREE_NODE,
    SOURCE_TREE_SELECT_OPEN,
    SOURCE_CLOSE_PANE,
    SOURCE_UPDATE_NAME,
    SOURCE_DELETE_SOURCE,
  } from '@/helper/constant';
  import { useSourceStore } from '@/store/source-store';
  import '@/views/data-source/css/index.less';
  export default defineComponent({
    name: 'LayoutSource',
    components: {
      JePanel: Panel,
      JeTabs: Tabs,
      JeTabPane: Tabs.TabPane,
      SourceType,
      SourceHome,
      SourceLayout,
    },
    setup() {
      const sourceStore = useSourceStore(); //数据源全局状态
      const state = reactive({
        lauoutOptions: {
          left: {
            size: 240,
            split: true,
            minSize: 250,
            maxSize: 400,
            collapsible: false,
            collapsed: false,
            style: { borderRight: '1px solid #ecedf0' },
          },
        },
        activeKey: 'index',
        tabBarGutter: 0,
        curTabData: { type: 'INDEX' }, //当前选中tab数据
        sourcePanes: [
          {
            title: '首页',
            key: 'index',
            type: 'INDEX',
            closable: false,
          },
        ],
      });

      const methods = {
        watchSelectSource(sourceItem) {
          const curSourceId = sourceItem.id;
          const sourceResult = state.sourcePanes.find((item) => {
            return item.key == curSourceId;
          });
          if (!sourceResult) {
            //没有当前数据源，则添加到选项卡里
            let curPane = {
              title: sourceItem.bean.DATASOURCE_TEXT,
              key: sourceItem.bean.JE_CORE_DATASOURCE_ID,
              type: sourceItem.bean.DATASOURCE_TYPE,
              closable: true,
              iconClass: sourceItem.iconClass,
              code: sourceItem.bean.DATASOURCE_CODE,
              id: sourceItem.bean.JE_CORE_DATASOURCE_ID,
              name: sourceItem.bean.DATASOURCE_TEXT,
              productId: sourceItem.bean.SY_PRODUCT_ID || '', //产品id
            };
            state.sourcePanes.push(curPane);
            state.curTabData = curPane;
            state.activeKey = sourceItem.id;
          } else {
            state.curTabData = sourceResult;
            state.activeKey = sourceResult.key;
          }
        },
        onEdit(targetKey) {
          // 当前选中和关闭选项是同一个时，pane需向前选中
          let curSourceCode = '';
          if (targetKey == state.activeKey) {
            state.sourcePanes.forEach((pane, i) => {
              if (pane.key === targetKey) {
                //当前pane位置
                const curIndex = i - 1;
                state.activeKey = state.sourcePanes[curIndex].key;
                curSourceCode = pane.code;
              }
            });
          }
          //去掉store的数据
          sourceStore.removeDataByCode(curSourceCode);
          //去掉当前项
          state.sourcePanes = state.sourcePanes.filter((pane) => {
            return pane.key !== targetKey;
          });
          VueEvent.emit(SOURCE_CLOSE_PANE, {
            closePaneId: targetKey, //关闭的数据源id
            curPaneId: state.activeKey, //当前展示的数据源id
          });
        },
        onChange(activeKey) {
          //切换tab时，需要设置当前数据源code
          state.sourcePanes.forEach((pane) => {
            if (pane.key === activeKey) {
              sourceStore.setSourceCode(pane.code);
            }
          });
          //切换tab时，需要选中对应的树节点
          VueEvent.emit(SOURCE_SELECT_TREE_NODE, {
            id: [activeKey],
          });
        },
        //切换服务
        changeSelectProduct() {
          const temPanes = state.sourcePanes.filter((item) => {
            if (item.key == 'index') {
              return item;
            }
          });
          state.sourcePanes = temPanes;
          state.activeKey = 'index';
          state.tabBarGutter = 0;
          state.curTabData = { type: 'INDEX' }; //当前选中tab数据
        },
        //新建数据源后立即打开
        watchOpenSource(sourceItem) {
          const curSourceId = sourceItem.JE_CORE_DATASOURCE_ID;
          const sourceResult = state.sourcePanes.find((item) => {
            return item.key == curSourceId;
          });
          if (!sourceResult) {
            //没有当前数据源，则添加到选项卡里
            let curPane = {
              title: sourceItem.DATASOURCE_TEXT,
              key: sourceItem.JE_CORE_DATASOURCE_ID,
              type: sourceItem.DATASOURCE_TYPE,
              closable: true,
              iconClass: sourceItem.iconClass,
              code: sourceItem.DATASOURCE_CODE,
              id: sourceItem.JE_CORE_DATASOURCE_ID,
              name: sourceItem.DATASOURCE_TEXT,
              productId: sourceItem.SY_PRODUCT_ID || '', //产品id
            };
            state.sourcePanes.push(curPane);
            state.curTabData = curPane;
            state.activeKey = sourceItem.JE_CORE_DATASOURCE_ID;
          } else {
            state.curTabData = sourceResult;
            state.activeKey = sourceResult.key;
          }
        },
        //监听资源表保存
        watchSaveSource(sourceData) {
          state.sourcePanes.forEach((pane) => {
            if (pane.id == sourceData.JE_CORE_DATASOURCE_ID) {
              pane.name = sourceData.DATASOURCE_TEXT;
              pane.title = sourceData.DATASOURCE_TEXT;
            }
          });
        },
        //监听删除数据源
        watchDeleteSource(sourceId) {
          let curSourceCode = '';
          if (sourceId == state.activeKey) {
            state.sourcePanes.forEach((pane, i) => {
              if (pane.key === sourceId) {
                //当前pane位置
                const curIndex = i - 1;
                state.activeKey = state.sourcePanes[curIndex].key;
                curSourceCode = pane.code;
              }
            });
          }
          //去掉store的数据
          sourceStore.removeDataByCode(curSourceCode);
          //去掉当前项
          state.sourcePanes = state.sourcePanes.filter((pane) => {
            return pane.key !== sourceId;
          });
          VueEvent.emit(SOURCE_CLOSE_PANE, {
            closePaneId: sourceId, //关闭的数据源id
            curPaneId: state.activeKey, //当前展示的数据源id
          });
        },
      };
      onMounted(() => {
        //监听资源树选中
        VueEvent.on(SOURCE_TREE_SELECT, methods.watchSelectSource);
        VueEvent.on(SOURCE_TREE_SELECT_OPEN, methods.watchOpenSource);
        VueEvent.on(SOURCE_UPDATE_NAME, methods.watchSaveSource);
        VueEvent.on(SOURCE_DELETE_SOURCE, methods.watchDeleteSource);
      });
      onUnmounted(() => {
        VueEvent.off(SOURCE_TREE_SELECT);
        VueEvent.off(SOURCE_TREE_SELECT_OPEN);
        VueEvent.off(SOURCE_UPDATE_NAME);
        VueEvent.off(SOURCE_DELETE_SOURCE);
      });
      return {
        ...toRefs(state),
        ...methods,
      };
    },
  });
</script>
<style scoped lang="less">
  .module-main {
    // width: 100%;
    height: 100%;
  }
  .layout-tabs {
    height: 100%;
  }
</style>
